<!DOCTYPE html> 
<html>
  <head>
    <meta charset="UTF-8">
    <title>用户增删改查案例</title>
    <script src="vue3.js"></script>
    <script src="axios.js"></script>
  </head>
  <body>
    <style>
      .dialog{
        width:240px;height:100px;border:solid 1px grey;
        padding:20px;position: absolute;
        background-color: #EEE;
        left:50%;top:50%;margin-left:-120px;margin-top:-50px;
      }
    </style>
    <div id="app">
      <div>
        <input type="text" placeholder="姓名">
      </div>
        <div id="toolbar">
            <button @click="getStudentList">查询</button>
            <button @click="onClickAdd">添加</button>
        </div>
        <div>
            <table width="100%" border="1">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>账号</th>
                        <th>密码</th>
                        <th>性别</th>
                        <th>简介</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in studentList">
                        <td>
                            {{item.id}}
                        </td>
                        <td>
                            {{item.realname}}
                        </td>
                        <td>
                            {{item.username}}
                        </td>
                        <td>
                            {{item.gender}}
                        </td>
                        <td>
                            {{item.desp}}
                        </td>
                        <td>
                            <button @click="onClickEdit(item)">编辑</button>
                            <button @click="delStudent(item.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr><td colspan="7">总计{{total}}条记录, 当前是第{{page}}页，共{{page_num}}页</td></tr>
                    <tr><td colspan="7">
                      <button @click="gotoPage(0)">首页</button>
                      <button @click="gotoPage(-1)">上一页</button>
                      <button @click="gotoPage(1)">下一页</button>
                      <button @click="gotoPage(9)">尾页</button>
                    </td></tr>
                </tfoot>
            </table>
        </div>

        <div class="dialog" v-if="dialogVisible">
          <table width="100%">
            <tr>
              <td>账号</td>
              <td>
                <input type="text" v-model="formData.username">
              </td>
            </tr>
            <tr>
              <td>姓名</td>
              <td>
                <input type="text" v-model="formData.realname">
              </td>
            </tr>
            <tr>
              <td>性别</td>
              <td>
                <input type="text" v-model="formData.gender">
              </td>
            </tr>
            <tr>
              <td>登陆密码</td>
              <td>
                <input type="text" v-model="formData.password">
              </td>
            </tr>
            <tr>
              <td>简介</td>
              <td>
                <input type="text" v-model="formData.desp">
              </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button @click="addOrEditStudent">保存</button> 
                    <button @click="dialogVisible=false">取消</button>
                </td>
            </tr>
          </table>
        </div>
    </div>
  
    <script>
      const service = axios.create({
        baseURL:"http://127.0.0.1:8088",
        timeout:6000
      }); 
      const {createApp} = Vue;
      var v = createApp({
        data(){
          return {
            total: 0,//总数
            studentList:[],//列表
            dialogVisible: false,//显示隐藏对话框
            //表单数据
            formData:{
                id:0,
                username:'',
                realname:'',
                gender:1,
                desp:''
            },
            page:1,
            limit:10,
            page_num:0
          }
        },
        methods:{
          gotoPage(v){
            if(v==0){
              this.page=1
              this.getStudentList()
            }else if(v==-1){
              if(this.page>1){
                this.page--;
                this.getStudentList()
              }
            }else if(v==1){
              if(this.page<this.page_num){
                this.page++;
                this.getStudentList()
              }
            }else if(v==9){
              this.page=this.page_num;
              this.getStudentList()

            }
          },
          getStudentList(){
            var self = this;
            service.get("/user/list?page="+self.page+"&limit="+self.limit).then(res=>{
                self.studentList = res.data.rows
                self.total = res.data.total
                self.page_num = parseInt((self.total+self.limit-1) / self.limit)
            })
          },
          addOrEditStudent(){
            var self = this;
            if(self.formData.id==0){
                //添加操作
                service.post("/user/add?name="+self.formData.name+"&age="+self.formData.age,{}).then(res=>{
                    alert(res.data.msg)
                    self.dialogVisible = false
                    self.getStudentList()
                })
            }else{
                //编辑操作
                service.post("/user/edit?name="+self.formData.name+"&age="+self.formData.age+"&id="+self.formData.id,{}).then(res=>{
                    alert(res.data.msg)
                    self.dialogVisible = false
                    self.getStudentList()
                })
            }
          },
          delStudent(id){
            var self = this;
            if(confirm("您是否确认删除选择的学生信息？")){
                service.post("/user/del?id="+id).then(res=>{
                    self.getStudentList()
                })
            }
          },
          onClickAdd(){
            this.dialogVisible = true;
            this.formData.id = 0
            this.formData.name = ""
            this.formData.age = ""
          },
          onClickEdit(data){
            this.dialogVisible = true;
            this.formData.id = data.id
            this.formData.name = data.name
            this.formData.age = data.age
          }
        },
        mounted(){
            this.getStudentList()
        }
      }).mount("#app")
    </script>
  </body>
</html>